<template>
  <div>
    文章页面<br/><br/>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="openotice" class="demo-form-inline">
        <!-- 查询条件 -->
        <el-form-item label="文章标题">
          <el-input v-model="openotice.ntitle" placeholder="请输入公告标题" widht="20px"></el-input>
        </el-form-item>
        <el-form-item label="话题专栏">
          <el-select v-model="openotice.topic" placeholder="请选择话题" style="width:150px">
            <el-option label="不限" value=""></el-option>
            <el-option label="健康膳食" value="健康膳食"></el-option>
            <el-option label="锻炼运动" value="锻炼运动"></el-option>
            <el-option label="预防疾病" value="预防疾病"></el-option>
          </el-select>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item >
          <el-button type="primary" @click="getAllOpenoticeButton">查询</el-button>
          <el-button type="primary"  @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
        <el-table :data="pageBean.beanList" style="width: 80%" >
            <el-table-column fixed type="index"  width="60" />
            <el-table-column prop="ntitle" label="文章标题" width="200" />
            <el-table-column prop="topic" label="话题专栏" width="120" />
            <el-table-column prop="like" label="点赞量" width="100" />
            <el-table-column prop="viewcount" label="浏览量" width="80" />
            <el-table-column prop="comment" label="评论量" width="80" >   
            </el-table-column>
            <el-table-column prop="createdate" label="创建时间" />
        </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5,10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      
      dialogFormTitle:"",
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 10,
      openotice: {},
      dialogFormVisible: false,

    };
  },
  mounted() {
    this.getAllOpenotice();

  },
  
  methods: {
    
    getCommentCount() {
      this.$axios
        .get( "comment/getCountByNid/"+this.item.nid).then((resp) => {
          if(resp.data.code==200){
            
            this.pageBean.comment = resp.data.data;
          }
        });
    },

    //条件查询操作
    getAllOpenoticeButton() {
      this.pageIndex = 1;
      this.pageSize = 10;
      this.getAllOpenotice();
    },

    //重置按钮
    reset() {
      this.openotice = {};
      this.getAllOpenotice();
    },      

    //查询所有公告
    getAllOpenotice() {
      this.$axios
        .post(
          "notice/nstate/" + this.pageIndex + "/" + this.pageSize,this.openotice)
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          } 
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllOpenotice();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAllOpenotice();
    },
  },
};
</script>

<style>
</style>